<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jQuery电商导航热门分类菜单</title>

		<link type="text/css" href="css/style.css" rel="stylesheet" />

		<script type="text/javascript" src="js/jquery.min.js"></script>

	</head>

	<body>
<div style="height: 100px;background: red;">
	100
</div> 
		<!--左侧菜单-->
		<div class="sec-mainL left">
			<!--菜单列表-->
			<ul class="sec-mainNav">
				<li>
					<h3>数码家电</h3>
					<div class="menu-tab">
						<a href="">京东</a>
						<a href="">易迅</a>
						<a href="">苏宁易购</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">京东</a>
								<a href="">易迅</a>
								<a href="">苏宁易购</a>
								<a href="">新蛋商城</a>
								<a href="">手机数码</a>
								<a href="">摄像影音</a>
								<a href="">耳麦音响</a>
								<a href="">国美在线</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				
				<li>
					<h3>食品酒水</h3>
					<div class="menu-tab">
						<a href="">美食特产</a>
						<a href="">酒水茶叶</a>
						<a href="">蛋糕预订</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">美食特产</a>
								<a href="">酒水茶叶</a>
								<a href="">蛋糕预订</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>商旅出行</h3>
					<div class="menu-tab">
						<a href="">酒店预订</a>
						<a href="">机票预订</a>
						<a href="">商旅综合</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">酒店预订</a>
								<a href="">机票预订</a>
								<a href="">商旅综合</a>
								<a href="">度假预订</a>
								<a href="">火车票预订</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>日用百货</h3>
					<div class="menu-tab">
						<a href="">飞飞商城</a>
						<a href="">图书教育</a>
						<a href="">百货</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">飞飞商城</a>
								<a href="">图书教育</a>
								<a href="">百货</a>
								<a href="">家纺家具</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>男女服装</h3>
					<div class="menu-tab">
						<a href="">时尚女装</a>
						<a href="">精品男装</a>
						<a href="">男女内衣</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">时尚女装</a>
								<a href="">精品男装</a>
								<a href="">男女内衣</a>
								<a href="">综合商城</a>
								<a href="">限时特卖</a>
								<a href="">淘宝品牌</a>
								<a href="">休闲服饰</a>
								<a href="">运动户外</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>鞋包配饰</h3>
					<div class="menu-tab">
						<a href="">潮流女鞋</a>
						<a href="">商务男鞋</a>
						<a href="">时尚包包</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">潮流女鞋</a>
								<a href="">商务男鞋 </a>
								<a href="">时尚包包</a>
								<a href="">运动休闲</a>
								<a href="">珠宝首饰</a>
								<a href="">经典腕表</a>
								<a href="">户外生活</a>
								<a href="">奢侈品</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>美容美妆</h3>
					<div class="menu-tab">
						<a href="">天天网</a>
						<a href="">美妆商城</a>
						<a href="">眼镜美瞳</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">天天网</a>
								<a href="">美妆商城</a>
								<a href="">眼镜美瞳</a>
								<a href="">品牌商城</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>母婴保健</h3>
					<div class="menu-tab">
						<a href="">壹药网</a>
						<a href="">康爱多</a>
						<a href="">医药保健</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">壹药网</a>
								<a href="">康爱多</a>
								<a href="">医药保健</a>
								<a href="">成人用品</a>
								<a href="">母婴商城</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
				<li>
					<h3>娱乐生活</h3>
					<div class="menu-tab">
						<a href="">游戏</a>
						<a href="">彩票</a>
						<a href="">演出票务</a>
						<div class="fix"></div>
					</div>
					<span class="menu-more">更多</span>
					<!--二级菜单-->
					<div class="menu-panel">
						<div class="menu-panel-hd">
							<h4>热门分类</h4>
							<div class="sub-group">
								<a href="">游戏</a>
								<a href="">彩票</a>
								<a href="">演出票务</a>
								<a href="">线上冲印</a>
								<a href="">生活服务</a>
							</div>
						</div>
						<div class="menu-panel-bd">
							<ul>
								<li>
									<a href=""><img src="img/0.png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (1).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (2).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0 (3).png" /></a>
								</li>
								<li>
									<a href=""><img src="img/0.jpg" /></a>
								</li>
							</ul>
						</div>
						<a href="" class="menu-panel-btn">
							<span>查看全部商家</span>
							<em></em>
						</a>
					</div>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			$(function() {
				var nav_top = $('.sec-mainNav').offset().top ;
				var nav_height = $('.sec-mainNav').height();
				//左侧导航动画
				$('.sec-mainNav li').on('mouseenter', function() {
					var menuul_top =  $(this).parent().offset().top;
					console.info("menuul_top:"+menuul_top);
					var li_top = $(this).offset().top;//100
					var li_outerHeight= $(this).outerHeight();//100
					console.info("li_top:"+li_top);
					console.info("li_outerHeight:"+li_outerHeight);
					var menu_panel_out_height =  $(this).find('.menu-panel').outerHeight();//699
					console.info("menu_panel_out_height:"+menu_panel_out_height);
					var dis_margin = li_top - menuul_top;
					var res_top = menu_panel_out_height/2;
					console.info("dis_margin:"+dis_margin);
					if(res_top > dis_margin){
						res_top = dis_margin;
					}
					$(this).find('.menu-panel').css({
							top: -res_top+ 'px'
					}); 
					$(this).find('.menu-panel').show();
					
				});
				$('.sec-mainNav li').on('mouseleave', function() {
					$(this).find('.menu-panel').hide();
				});
			});
		</script>

	</body>

</html>